<template>
	<view class="body" :style="{ height: height + 'px' }">
		<!-- 顶部提示 -->
		<view class="notice">
			<view class="message"><text>感谢您对狐狸尾巴的支持，请将您的反馈提交给我们吧，这样会让狐狸尾巴越做越好的。</text></view>
		</view>

		<!-- 多行输入框 -->
		<view class="tip-textarea uni-textarea">
			<view class="tip-textarea-title">问题</view>
			<textarea @keyboardheightchange="keyboard" :disabled="feedback.length === 200" v-model="feedback" placeholder="最多200字"></textarea>
			<view v-show="!buttonFlag" class="count">({{ feedback.length }}/200)</view>
		</view>
		<!-- 文件上传 -->
		<view class="tip-img">
			<view class="tip-img-bg">
				<view class="tip-img-title">相关截图（可选）</view>
				<upload-images @changeImg="temFile" :sourceImgs="sourceImgs" :total="2" :sourceTypeIndex="1" :sizeTypeIndex="0"></upload-images>
			</view>
		</view>

		<button @tap="sub" v-show="buttonFlag" plain="true" class="flexButton">完成</button>
	</view>
</template>

<script>
import uploadImages from '../../components/common/upload-images.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		uploadImages
	},
	data() {
		return {
			height: 0,
			sourceImgs: [],
			buttonFlag: true,
			feedback: ''
		};
	},
	methods: {
		keyboard(e) {
			if (e.detail.height) {
				this.buttonFlag = false;
			} else {
				this.buttonFlag = true;
			}
		},
		temFile(imgs) {
			this.sourceImgs = imgs;
		},
		sub() {
			if (!this.feedback) {
				showToast('反馈内容不能为空');
			}
			uni.showLoading({
				mask: true
			});
			if (this.sourceImgs.length > 0) {
				this.up();
			} else {
				this.submit();
			}
		},
		up() {
			let imgsData = [];
			this.sourceImgs.forEach((imgurl, index) => {
				imgsData.push({
					name: `file${index}`,
					uri: imgurl
				});
			});
			let user = uni.getStorageSync(constant.user);
			uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.uploadNotCh,
				files: imgsData,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`
				},
				success: res => {
					console.log(res);
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						this.submit(data.data);
					} else {
						uni.hideLoading();
						showToast(data.msg);
						this.feedback = '';
						this.sourceImgs = [];
					}
				},
				fail(e) {
					console.log(e);
				}
			});
		},
		submit(urls) {
			let dataSet = {
				question: this.feedback
			};
			if (urls) {
				let imgs = urls.join(',');
				dataSet.questionUrl = imgs;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.feedback,
				data: dataSet,
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.hideLoading();
						showToast('反馈已成功受理');
					} else {
						uni.hideLoading();
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
					uni.hideLoading();
				}
			});
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.height = res.windowHeight;
			}
		});
	}
};
</script>

<style lang="less">
.body {
	background: #f5f7fa;
}
.notice {
	margin-bottom: 20rpx;

	.message {
		text-indent: 1em;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		line-height: 30rpx;
		color: #999999;
		background-color: #ffffff;
	}
}

//图片
.tip-img {
	margin-top: 20rpx;

	.tip-img-bg {
		background-color: #ffffff;
	}
	.tip-img-title {
		font-size: 30rpx;
		padding: 15rpx 40rpx 0;
		font-weight: 700;
	}
}

.tip-textarea {
	position: relative;
	border-top: 1rpx solid transparent;
	padding-bottom: 40rpx;

	.tip-textarea-title {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 700;
		margin: 15rpx 0;
	}
	textarea {
		margin-left: 40rpx;
		width: 90%;
		padding: 0;
		padding-left: 20rpx;
		padding-top: 5rpx;
		height: 275rpx;
		background-color: #eeeeee;
		border-radius: 10rpx;
	}

	.count {
		position: absolute;
		bottom: 40rpx;
		right: 5%;
		color: #8d8b8c;
	}
}
.flexButton {
	position: fixed;
	bottom: 20rpx;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #fcb5b9, #ff7ea5) !important;
	color: #ffffff;
	border: 0 !important;
	border-radius: 40rpx !important;
}
</style>
